
function a_1_0_1_1_1_load_html() {
let _this=this;
_this.index=0;
_this.now_load_urls={};
_this.run_flag=0;
_this.run_lst=[];
_this.get_url_id=function(url){
    for(let k in _this.now_load_urls){
        if (url==_this.now_load_urls[k]){
            return null;
        }
    }
    _this.index++;
    _this.now_load_urls[_this.index]=url;
    function a_1_1_1_1_1_load_html() {
      let _this=this;
      _this.index=0;
      _this.now_load_urls={};
      _this.run_flag=0;
      _this.run_lst=[];
      _this.get_url_id=function(url){
          for(let k in _this.now_load_urls){
              if (url==_this.now_load_urls[k]){
                  return null;
              }
          }
          _this.index++;
          _this.now_load_urls[_this.index]=url;
          return _this.index;
      }
      //加载指定src的js
      _this.loadScript=function(src) {
              return new Promise((resolve, reject) => {
                  const script = document.createElement('script');
                  script.src = src;
      
                  script.onload = () => resolve();
                  script.onerror = () => reject(new Error('Script failed to load'));
                  document.head.appendChild(script);
              });
          }
      
      //计时器
      _this.timer=null;
      //待处理数据列表
      _this.timer_lst=[];
      //计时器运行函数
      _this.timer_func= async function(){
          while(_this.timer_lst.length){
              let new_obj=_this.timer_lst.shift();
              let func=new_obj.func;
              if(func.constructor.name === 'AsyncFunction'){
                  await func(new_obj.params);
              } else{
                  func(new_obj.params);
              }
          }
          _this.timer=null;
      };
      //给计数器运行的函数添加待处理数据  如果计时器没有开启则开启计时器
      _this.timer_start=function(obj) {  
          _this.timer_lst.push(obj);
          if(_this.timer==null){
      
              _this.timer = setTimeout(_this.timer_func, 0);    // 设置计时器为开启状态  
          }
      }  
      //加载指定html内容到dom下
      _this.load=async function(url,dom) {
          _this.timer_start({
              func:_this.load_func,
              params:{url:url,dom:dom}
          });
      }
      //删除style和script标签
      _this.removeScriptsAndStyles=function(htmlString) {
        // 使用正则表达式匹配<script>标签及其内容
        let scriptRegex = /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;
        // 使用正则表达式匹配<style>标签及其内容
        let styleRegex = /<style\b[^<]*(?:(?!<\/style>)<[^<]*)*<\/style>/gi;
     
        // 替换<script>标签及其内容为空字符串
        let noScriptsHtml = htmlString.replace(scriptRegex, '');
        // 替换<style>标签及其内容为空字符串
        let cleanHtml = noScriptsHtml.replace(styleRegex, '');
     
        return cleanHtml;
    }
      _this.load_func=async function(obj){
          let url=obj.url;
          let dom=obj.dom;
          let idx=_this.get_url_id(url);
          if(!idx){return}//如果加载过 则直接跳过
          // Step 1: Fetch the HTML content using AJAX
          fetch(url)
              .then(response => response.text())
              .then(async (htmla) => {
                  // Step 2: Parse the HTML and extract script srcs and link/style hrefs
                  const parser = new DOMParser();
                  console.log("parse1")
                  const doc = parser.parseFromString(htmla, 'text/html');
                  console.log("parse2")
        
                  const src_a = [];
                  const href_a = [];
        
                  //获取当前html页面的 所有script标签的src内容
                  console.log('获取当前html页面的 所有script标签的src内容')
                  document.querySelectorAll('script[src]').forEach(script => {
                      const src = script.getAttribute('src');
                      if (!src_a.includes(src)) {
                          src_a.push(src);
                      }
                  });
                  console.log("parse3")
                  //获取当前html和页面的 所有link标签的href内容
                  console.log('获取当前html和页面的 所有link标签的href内容')
                  document.querySelectorAll('link[href]').forEach(element => {
                      const href = element.getAttribute('href');
                      if (href && !href_a.includes(href)) {
                          href_a.push(href);
                      }
                  });
                  console.log("parse4")
                  //获取当前html页面的 所有style标签的id内容
                  console.log('获取当前html页面的 所有style标签的id内容')
                  const styleElements = document.getElementsByTagName('style');
                  for (let i = 0; i < styleElements.length; i++) {
                      const styleId = styleElements[i].id;
                      if (styleId) { // 检查id是否存在（即不是null或undefined，且不是空字符串）
                          href_a.push(styleId);
                      }
                    }
                    console.log("parse5")
                  //获取当前html页面的 所有script标签的id内容
                  console.log('获取当前html页面的 所有script标签的id内容')
                  const scriptElements = document.getElementsByTagName('script');
                  for (let i = 0; i < scriptElements.length; i++) {
                      const scriptId = scriptElements[i].id;
                      if (scriptId) { // 检查id是否存在（即不是null或undefined，且不是空字符串）
                          src_a.push(scriptId);
                      }
                    }
                    console.log("parse6")
                  console.log('获取要加载页面的 所有link标签的href内容 并且加载未加载内容')
                  doc.querySelectorAll('link[href]').forEach(link => {
                      const href = link.getAttribute('href');
                      if (!href_a.includes(href)) {
                          const newLink = document.createElement('link');
                          newLink.rel = 'stylesheet';
                          newLink.href = href;
                          document.head.appendChild(newLink);
                      }
                  });
        
                  console.log('获取要加载页面的 所有style标签 并且加载未加载内容')
                  let styleCounter = 0;
                  doc.querySelectorAll('style').forEach(style => {
                      const href = style.getAttribute('href');
                      if (!href && !href_a.some(existingHref => existingHref.endsWith(`_${styleCounter}`))) {
                          const newStyle = document.createElement('style');
                          newStyle.textContent = style.textContent;
                          newStyle.setAttribute('id', `${idx}_${styleCounter++}`);
                          document.head.appendChild(newStyle);
                      }
                  });
                  console.log('获取要加载页面的 所有script标签的src内容 并且加载未加载内容')
                  const scripts = doc.querySelectorAll('script[src]');
                  for (const script of scripts) {
                      const src = script.getAttribute('src');
                      if (!src || !src_a.includes(src)) {
                          await _this.loadScript(src); // 确保loadScript返回一个Promise
                          // console.log("加载",script,"完成")
                      }
                  }
                  // doc.querySelectorAll('script[src]').forEach(async(script) => {
                  //     const src = script.getAttribute('src');
                  //     if (!src || !src_a.includes(src)) {
                  //         await _this.loadScript(src);
                  //         console.log
                  //     }
                  // });
                  
                  console.log('获取要加载页面的 添加body到指定dom的innerhtml')
                  window.tdom=dom;
                  if(!dom.getAttribute("a_1_1_1_1_1_"+idx)){
                      dom.setAttribute("a_1_1_1_1_1_"+idx,"1");
                      dom.innerHTML=_this.removeScriptsAndStyles(doc.body.innerHTML);
                  }
                  console.log('获取要加载页面的 所有script标签 并且加载未加载内容')
                  let scriptCounter = 0;
                  doc.querySelectorAll('script:not([type])').forEach(script => {
                      const id__ = script.getAttribute('id');
                      if(!src_a.includes(id__)){
                          const newScript = document.createElement('script');
                          newScript.setAttribute('id', `${idx}_${scriptCounter++}`);
                          document.head.appendChild(newScript);
                          eval(script.textContent);
                      }
                  });
                  console.log("end")
              })
              .catch(error => {
                  console.error('Error fetching or processing the HTML:', error);
              });
        }
      }
      // o=new  a_1_1_1_1_1_load_html();
      // o.load('https://www.baidu.com/',document.getElementById("test")).then(result => {}).catch(error => {});;
        
    Vue.component2('a_1_1_1_1_1', {
      template: `
          <div ref="father"style="width:100%;height:100%" 
          
      :class="['a_1_1_1_1_1',
      
    'ea_m-'+data.__style.__margin,
    'ea_mx-'+data.__style.__margin_x,
    'ea_my-'+data.__style.__margin_y,
    'ea_mr-'+data.__style.__margin_right,
    'ea_ml-'+data.__style.__margin_left,
    'ea_mt-'+data.__style.__margin_top,
    'ea_mb-'+data.__style.__margin_bottom,
    'ea_p-'+data.__style.__padding,
    'ea_px-'+data.__style.__padding_x,
    'ea_py-'+data.__style.__padding_y,
    'ea_pr-'+data.__style.__padding_right,
    'ea_pl-'+data.__style.__padding_left,
    'ea_pt-'+data.__style.__padding_top,
    'ea_pb-'+data.__style.__padding_bottom,
    
    
      { 'a_1_1_1_1_1_move_edit_class': data.edit_move_show }, { 'a_1_1_1_1_1_move_edit_class2': data.edit_move_show&&(!drawer) },]"
          >
    <v-app-bar app>
    <div class="a_1_1_1_1_1_head_class"><div class="a_1_1_1_1_1_left">
        <span @click="drawer = !drawer" :class="data.icon"></span>{{data.name1}}
      </div>
      <div ref='head' 
      :class="['a_1_1_1_1_1_head', { 'a_1_1_1_1_1_edit_class1': data.__style.__edit_flag__ }]"
      >
      <slot name="head"></slot>
    </div>
    </div>
    </v-app-bar>
    <v-navigation-drawer
    v-model="drawer"
    app
    >
    <v-list-item subtitle="Vuetify">{{data.name1}}</v-list-item>
    <v-divider></v-divider>
        <v-list-item
          v-for="(item, key) in data.menu_data"
          :key="key"
          link
          :title="item.name"
        >
          <!-- 你可以在这里添加更多内容，比如图标和链接 -->
          <v-icon>{{ item.icon }}</v-icon> <!-- 假设你有一个 v-icon 组件来显示图标 -->
          <span @click="select_url(key)">{{ item.name }}</span>
        </v-list-item>
    </v-navigation-drawer>
    <!-- 应用的主要内容区域 -->
    <v-main>
    
    <div class="container" ref="main">
      <!-- 您的页面内容 -->
    
    </div>
    
    </v-main>
          </div>
    `,  
    data() {
        return {
          
          drawer: true,
          data:{
              edit_move_show:false,
              
                name1: "后台管理系统",
                icon: "icon iconfont icon-shezhi",
                menu_data: [
                    {name:'设备控制',icon:'',url:'',test:[{icon:''}]},
                    {name:'用户中心',icon:'',url:'',test:[{icon:''}]},
                    {name:'日志中心',icon:'',url:'',test:[{icon:''}]},
                ]
          }
        };
    },
    methods:{
      select_url:function(idx){
        let _this=this;
        console.log("now_select",idx)
        console.log("url:",this.data.menu_data[idx].url)
        _this.load_obj.load(this.data.menu_data[idx].url,this.$refs.main).then(result => {}).catch(error => {});
      },
      selectItem(component) {
          console.log("当前选择:",component)
          this.currentComponent = component;
        },
        // move_show:function(){
        //     this.data.edit_move_show
        // },
          //删除之前显示的插槽
          con_del:function(){
            try{
                this.old_con_dom.parentNode.removeChild(this.old_con_dom);}catch{}
          },
          //显示当前的插槽
          con_add:function(obj){
            let dom=obj.dom;
            let ref=obj.ref;
            // console.log("初始化容器","新建一个dom");
            let new_dom=document.createElement('div');
            
            new_dom.setAttribute('miaobian','1');
            new_dom.innerHTML="<div style='height:100%;width:10px;background:red;z-index: 9999;'></div>"
          if (dom !== null) {
            // console.log("在...之前插入",new_dom,dom)
            this.$refs[ref].insertBefore(new_dom, dom);
          } else {
            // 如果 child_dom 是 null，则将新元素添加到 father_dom 的末尾
            this.$refs[ref].appendChild(new_dom);
          }
          this.con_del();
          this.old_con_dom=new_dom;
          },
          //查找 要插入的组件 位于哪一个插槽
          check_slot(dom){
            while(1){
                if(dom==this.$refs.father){return null}
                else if(dom==this.$refs.head){
                    console.log("return head")
                    return 'head'}
                else{dom=dom.parentNode}
            }
          }
    },
    mounted:function(){
      //用于加载url的
    _this.load_obj=new  a_1_1_1_1_1_load_html();
    //_this.load_obj.load('https://www.baidu.com/',document.getElementById("test")).then(result => {}).catch(error => {});;
    }
    }
    );
    // 
    
    return _this.index;
}
//加载指定src的js
_this.loadScript=function(src) {
        return new Promise((resolve, reject) => {
            const script = document.createElement('script');
            script.src = src;

            script.onload = () => resolve();
            script.onerror = () => reject(new Error('Script failed to load'));
            document.head.appendChild(script);
        });
    }

//计时器
_this.timer=null;
//待处理数据列表
_this.timer_lst=[];
//计时器运行函数
_this.timer_func= async function(){
    while(_this.timer_lst.length){
        let new_obj=_this.timer_lst.shift();
        let func=new_obj.func;
        if(func.constructor.name === 'AsyncFunction'){
            await func(new_obj.params);
        } else{
            func(new_obj.params);
        }
    }
    _this.timer=null;
};
//给计数器运行的函数添加待处理数据  如果计时器没有开启则开启计时器
_this.timer_start=function(obj) {  
    _this.timer_lst.push(obj);
    if(_this.timer==null){

        _this.timer = setTimeout(_this.timer_func, 0);    // 设置计时器为开启状态  
    }
}  
//加载指定html内容到dom下
_this.load=async function(url,dom) {
    _this.timer_start({
        func:_this.load_func,
        params:{url:url,dom:dom}
    });
}
_this.load_func=async function(obj){
    let url=obj.url;
    let dom=obj.dom;
    let idx=_this.get_url_id(url);
    if(!idx){return}//如果加载过 则直接跳过
    // Step 1: Fetch the HTML content using AJAX
    fetch(url)
        .then(response => response.text())
        .then(async (htmla) => {
            // Step 2: Parse the HTML and extract script srcs and link/style hrefs
            const parser = new DOMParser();
            console.log("parse1")
            const doc = parser.parseFromString(htmla, 'text/html');
            console.log("parse2")
  
            const src_a = [];
            const href_a = [];
  
            //获取当前html页面的 所有script标签的src内容
            console.log('获取当前html页面的 所有script标签的src内容')
            document.querySelectorAll('script[src]').forEach(script => {
                const src = script.getAttribute('src');
                if (!src_a.includes(src)) {
                    src_a.push(src);
                }
            });
            //获取当前html和页面的 所有link标签的href内容
            console.log('获取当前html和页面的 所有link标签的href内容')
            document.querySelectorAll('link[href]').forEach(element => {
                const href = element.getAttribute('href');
                if (href && !href_a.includes(href)) {
                    href_a.push(href);
                }
            });
            //获取当前html页面的 所有style标签的id内容
            console.log('获取当前html页面的 所有style标签的id内容')
            const styleElements = document.getElementsByTagName('style');
            for (let i = 0; i < styleElements.length; i++) {
                const styleId = styleElements[i].id;
                if (styleId) { // 检查id是否存在（即不是null或undefined，且不是空字符串）
                    href_a.push(styleId);
                }
              }
            //获取当前html页面的 所有script标签的id内容
            console.log('获取当前html页面的 所有script标签的id内容')
            const scriptElements = document.getElementsByTagName('script');
            for (let i = 0; i < scriptElements.length; i++) {
                const scriptId = scriptElements[i].id;
                if (scriptId) { // 检查id是否存在（即不是null或undefined，且不是空字符串）
                    src_a.push(scriptId);
                }
              }
            console.log('获取要加载页面的 所有link标签的href内容 并且加载未加载内容')
            doc.querySelectorAll('link[href]').forEach(link => {
                const href = link.getAttribute('href');
                if (!href_a.includes(href)) {
                    const newLink = document.createElement('link');
                    newLink.rel = 'stylesheet';
                    newLink.href = href;
                    document.head.appendChild(newLink);
                }
            });
  
            console.log('获取要加载页面的 所有style标签 并且加载未加载内容')
            let styleCounter = 0;
            doc.querySelectorAll('style').forEach(style => {
                const href = style.getAttribute('href');
                if (!href && !href_a.some(existingHref => existingHref.endsWith(`_${styleCounter}`))) {
                    const newStyle = document.createElement('style');
                    newStyle.textContent = style.textContent;
                    newStyle.setAttribute('id', `${idx}_${styleCounter++}`);
                    document.head.appendChild(newStyle);
                }
            });
            console.log('获取要加载页面的 所有script标签的src内容 并且加载未加载内容')
            const scripts = doc.querySelectorAll('script[src]');
            for (const script of scripts) {
                const src = script.getAttribute('src');
                if (!src || !src_a.includes(src)) {
                    await _this.loadScript(src); // 确保loadScript返回一个Promise
                    console.log("加载",script,"完成")
                }
            }
            // doc.querySelectorAll('script[src]').forEach(async(script) => {
            //     const src = script.getAttribute('src');
            //     if (!src || !src_a.includes(src)) {
            //         await _this.loadScript(src);
            //         console.log
            //     }
            // });
            
            console.log('获取要加载页面的 添加body到指定dom的innerhtml')
            window.tdom=dom;
            if(!dom.getAttribute("a_1_0_1_1_1_"+idx)){
                dom.setAttribute("a_1_0_1_1_1_"+idx,"1");
                dom.innerHTML=doc.body.innerHTML;
            }
            console.log('获取要加载页面的 所有script标签 并且加载未加载内容')
            let scriptCounter = 0;
            doc.querySelectorAll('script:not([type])').forEach(script => {
                const id__ = script.getAttribute('id');
                if(!src_a.includes(id__)){
                    const newScript = document.createElement('script');
                    newScript.setAttribute('id', `${idx}_${scriptCounter++}`);
                    document.head.appendChild(newScript);
                    eval(script.textContent);
                }
            });
            console.log("parse4")
        })
        .catch(error => {
            console.error('Error fetching or processing the HTML:', error);
        });
  }
}
// o=new  a_1_0_1_1_1_load_html();
// o.load('https://www.baidu.com/',document.getElementById("test")).then(result => {}).catch(error => {});;
  